<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 500px;" id="pie"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 500px;" id="bar"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col >
        <el-card>
          <div style="width: 100%; height: 500px;" id="pie"></div>
        </el-card>
      </el-col>
    </el-row> -->


  </div>
</template>

<script>
import * as echarts from 'echarts';

// const option = {
//   title: {
//     text: '曲线统计表',
//     left: 'center'
//   },
//   tooltip: {
//     trigger: 'axis'
//   },
//   legend: {
//     left: 'left'
//   },
//   xAxis: {
//     type: 'category',
//     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
//   },
//   yAxis: {
//     type: 'value'
//   },
//   series: [
//     {
//       name: '手机',
//       data: [150, 230, 224, 218, 135, 147, 260],
//       type: 'line',
//       // smooth: true 是否为曲线
//     },
//   ]
// };

const option1 = {
  title: {
    text: '商品总计金额',
    left: 'center'    
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    left: 'left'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '金额',
      data: [],
      type: 'bar',
      // smooth: true 是否为曲线
    },
  ]
};

const option2 = {
  title: {
    text: '商品总计金额',
    subtext: '饼状图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

export default {
  data() {
    return {

    }
  },

  mounted(){
    // var linetDom = document.getElementById('line')
    // var lineChart = echarts.init(linetDom)
    // lineChart.setOption(option)

    var barDom = document.getElementById('bar')
    var varChart = echarts.init(barDom)
    varChart.setOption(option1)
    
    var pieDom = document.getElementById('pie')
    var pieChart = echarts.init(pieDom)
    pieChart.setOption(option2)
  },

  methods: {
    queryAllCount(){
        this.$axios.get('apig/css-order/queryAllCount').then(resp=>{
          option2.series[0].data=resp.data.data
          // console.log(resp.data.data)
        })
      },

    queryAllCount2(){
      this.$axios.get('apig/css-order/queryAllCount2').then(resp=>{
          option1.xAxis.data=resp.data.data.data
          option1.series[0].data=resp.data.data.value
          // console.log(resp.data)
        })
    }
  },

  created(){
    this.queryAllCount()
    this.queryAllCount2()
  },

  
}
</script>

<style scoped>
</style>